<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <style>
        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
        .map-chart{
            width: 100px;
            height: 100px;
        }

    </style>
    <script src="lib/echart/echarts.min.js"></script>
</head>
<body>
<div class="pop" style="display: none;">123</div>
<div id="map" style="width: 100%">
</div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>
<script>
    var webip="http://localhost:";
    var gisip="http://localhost:";
    var webport="8080/";
    var gisport="8080/";
    /*********************************************************地图初始化**********************************************************/
    /*底图初始化*/
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([508881,299705],"EPSG:3857","EPSG:3857"),
        zoom: 18
    });
    //var osm=new ol.layer.Tile({source: new ol.source.OSM()});
    var tilePoint = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:point'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolyline = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polyline'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolygon = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polygon'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    /*矢量图层初始化*/

    /////////////////////////////////////
    var pointTypename="xcy:point";
    var pointVectorSource = new ol.source.Vector({
        features:[]
    });
    var pointVectorLayer = new ol.layer.Vector({
        title:"点",
        source: pointVectorSource,
        //style: styleFunction,
        //style:stylePoint,
        renderMode:'image'
    });

    setTimeout(showHeight,2000);
    function showHeight() {
        this.name="";
        $.ajax({
            type: "GET",
            url: gisip+gisport+'geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+pointTypename+'&outputFormat=application%2Fjson&maxFeatures=20',
            dataType:'json',
            success: function(data){
                ////添加自定义弹出框
/*                var features=data.features;
                for(var i=0;i<features.length;i++)
                {
                    var feature=features[i];
                    var ft=new ol.Feature({
                        geometry:new ol.geom.Point(feature.geometry.coordinates),
                        //attr:feature
                    });
                    ft.attr=feature;
                    pointVectorSource.addFeature(ft);

                    var dom=$('<div class="ol-popup"><a href="#" class="ol-popup-closer"></a> <div>'+feature.properties.Text+'</div></div>');
                    //var dom=$("<div>").addClass("pop").html(feature.properties.Text);
                    var overlay= new ol.Overlay({
                        element:dom[0],
                        //element:$(".pop")[0],
                        position:feature.geometry.coordinates,
                        //positioning:"top-left"
                    });
                    map.addOverlay(overlay);
                }*/
                ////添加统计图
                var charts=[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ];
                var features=data.features;
                 for(var i=0;i<features.length;i++)
                 {
                         var feature=features[i];
                         var ft=new ol.Feature({
                         geometry:new ol.geom.Point(feature.geometry.coordinates),
                     });
                     ft.attr=feature;
                     pointVectorSource.addFeature(ft);

                     var dom=$('<div class="map-chart"></div>');
                     //var dom=$("<div>").addClass("pop").html(feature.properties.Text);
                     var overlay= new ol.Overlay({
                        element:dom[0],
                         position:feature.geometry.coordinates,
                        //positioning:"top-left"
                     });
                     map.addOverlay(overlay);
                     addChart(dom[0],charts);
                 }
            }

        });
    }
    function addChart(dom,chart) {

        var myChart = echarts.init(dom);
        var option = {

            tooltip : {
                trigger: 'item',
                formatter: "{b}:{d}%"
            },

            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
/*                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }

                    }*/
                    itemStyle : {
                        normal : {
                            label : {
                                show : false   //隐藏标示文字
                            },
                            labelLine : {
                                show : false   //隐藏标示线
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);

    }
    function styleFunction(feature) {
        var height=feature.attr.properties.Text;
        if(map.getView().getZoom()<20)
        {
            height="";
        }
        return new ol.style.Style({
            image:new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "#389BCD",
                    opacity: 0.5
                })
            }),
            text:new ol.style.Text({
                text:height,
                textAlign:"left",
                offsetX:5,
                fill: new ol.style.Fill({
                    color: "#cd0500",
                    opacity:1
                }),
                stroke:new ol.style.Stroke({
                    color:"#dd942e",
                    width:1
                }),
                font:" 14px SimHei"
            })
        });
    }
    // map
    var map = new ol.Map({
        layers: [
            //tilePoint,
            tilePolyline,
            tilePolygon,
            pointVectorLayer,
        ],
        view:view,
        target: 'map',
        renderer:"canvas"
    });
    /*点击事件初始化*/
    var select=new ol.interaction.Select({
        //condition: ol.events.condition.pointerMove,
        layers:[pointVectorLayer],
        multi:true,
/*        style:function (feature) {
            return st(feature,true);
        }*/
    });
    select.on("select",function (e) {
        var features=e.selected;
        var feature=features[0];

        var wktformat= new ol.format.WKT();
        alert(feature.getProperties());
        //alert(wktformat.writeGeometry(feature.getGeometry()));
    });
    map.addInteraction(select);





</script>
</body>
</html>
